Ext.namespace('SLM');

SLM.EventViewer = function( config, record ) {

	config = config || {};

	var filter = {
		items:[{	
				field: 'event_id'
			,	condition: 'EQUAL'
			,	value: record.event_id
		}]
	}
	
	this.store = new Ext.data.JsonStore({
			url: Config.baseUrl + 'resources/api/app.php'
		,	root: 'records'
		,	baseParams: {
					cmd: 'event-list'
				,	filter: Ext.encode(filter)
			}
		,	fields: [
					{name: 'event_type'}
				,	{name: 'event_type_id'}
				,	{name: 'event_id'}
				,	{name: 'title'}
				, 	{name: 'date_start'}
				, 	{name: 'date_end'}
				, 	{name: 'description'}
				, 	{name: 'land_id'}
				,	{name: 'property'}
			]
	});
	
	var tpl = new Ext.XTemplate(
			'<tpl for=".">'
		,		'<div class="wrap">'
		,		'<tpl if="title != 0">'
		,			'<div>Event: {title}</div>'
		,		'</tpl>'
		,	'<tpl if="property != null"><div>Property: {property}</div></tpl>'
		,	'<tpl if="date_start != \'0000-00-00\'"><div>Start: {date_start:this.newDate}</div></tpl>'
		,	'<tpl if="date_end != \'0000-00-00\'"><div>End: {date_end:this.newDate}</div></tpl>'
		,	'<tpl if="description != 0"><div>Description: {description}</div></tpl>'
		,	'</div></tpl>'
		,	{
				newDate: function(value) {
					dt=new Date(value);
					return ( dt.format('F j, Y') );
				}						
			}
		);

	Ext.apply(this, config, {
			title: 'Event'
		,	width: 300
		,	height: 250
		,	modal: true
		,	layout: 'fit'
		,	onEsc: Ext.emptyFn
		,	autoScroll: true
		,	bodyStyle: 'background-color: #f9f9f9; padding:5px'
		,	items: new Ext.DataView({
					store: this.store
				,	tpl: tpl
				,	autoHeight:true
				,	itemSelector: 'div.wrap'
				,	emptyText: 'No event data.'
	    })
		,	fbar: {
				xtype: 'toolbar'
			,	items: [{
					text: 'Close'
				,	scope: this
				,	handler: function(){
						this.close();
					}
				}]	
			}
		,	listeners: {
				'show': function() {
					this.store.load();
				}
			}
	});

	SLM.EventViewer.superclass.constructor.apply(this, arguments);

};

Ext.extend( SLM.EventViewer, Ext.Window, {						 
});